<template>
  <div>
    <div class="weatherForm">
      <el-form
        :inline="true"
        style="display:flex; justify-content:center;width:100"
      >
        <div>
          <el-form-item>
            <el-input
              v-model="city"
              placeholder="输入你的所在城市"
              size="normal"
              @change="getWeatenData"
              class="weaten_ipt"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="default" @click="getWeatenData"
              >查询天气</el-button
            >
          </el-form-item>
        </div>
      </el-form>

      <ul class="Weather-items">
        <li v-for="(items, key, index) in list" :key="index">
          <p
            class="iconfont (items.type == '晴') ? icon-qingtian :(items.type == '多云')?icon-duoyun:(items.type == '雨天')?'icon-yutian':''"
          >
            {{ items.type }}
          </p>
          <p>{{ items.date }}</p>
          <p>
            {{ items.high.replace("高温", "") }}~{{
              items.low.replace("低温", "")
            }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Weather",
  data() {
    return {
      city: "洪山区",
      list: ""
    };
  },
  mounted() {},
  methods: {
    getWeatenData() {
      this.axios
        .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
        .then(val => {
          this.list = val.data.data.forecast;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.Weather-items {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  text-align: center;
  p {
    margin: 5px auto;
  }
}
</style>
